@extends('layout.layer')

@section('layout.content')
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal" id="user-create" autocomplete="off">

        <div class="form-group">
          <label class="col-xs-12 control-label no-padding-right" for="user_account"> <b><span class="red align-middle">*</span> 账号：</b>
          </label>
          <div class="col-xs-12">
            <input type="text" class="form-control" name="user_account" placeholder="请输入账号" />
            <input type="hidden" name="uid" id="uid" value=""/>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-12">
            <table class="table table-hover table-striped table-bordered">
              <thead>
              <tr>
                <th class="center" style="width:60px;">选择</th>
                <th class="align-middle">班级</th>
                <th class="center" style="width:70px;">计划招生</th>
                <th class="center" style="width:70px;">已报名</th>
              </tr>
              </thead>
              <tbody>
                @foreach ($term->clases as $clase)
                  <tr class="">
                    <td class="center">
                      <input name="clase" value="{{$clase->id}}" type="checkbox" class="ace ace-checkbox-2 input-lg">
                          <span class="lbl"></span>
                    </td>
                    <td class="align-top train">{{ $clase->name }}</td>
                    <td class="align-top-center">{{ $clase->number }}</td>
                    <td class="align-top-center b">{{ count($clase->users) }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>

        <div class="space-32"></div>
        <div class="form-group">
          <div class="col-xs-12 center">
            <button type="submit" class="btn btn-primary" style="margin-right:15px;">
              <i class="ace-icon fa fa-check"></i>
              确定
            </button>

            <button type="button" class="btn btn-light">
              <i class="ace-icon fa fa-times"></i>
              取消
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>
@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>


  <script type="text/javascript">
      $(function () {

          $("input:checkbox[name='clase']").on('click', function (e) {
              $("input:checkbox[name='clase']").not(this).attr("checked", false);
          });


          $('.btn-light').on('click', function(e) {
            //parent.location.reload();
            //var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(parent.layer.index);
          });


          $("input[name='user_account']").autocomplete({
            source : function(request, response) {
              $.get('/users', {
                  'term':request.term,
                  'type':2,
                }, function(data) {
                  response($.map(data,function(item) {
                    console.log(item);
                    return {
                      label: item.account+' - '+item.name,
                      uid:item.id
                    }
                  }));

                },'json');
              },

            select:function(e, ui) {
              console.log(ui.item);
              //uid = ui.item.account;
              $("input[name='uid']").val(ui.item.uid);
            },
            minLength: 3,
            maxlength: 5,
          });

          /**
           表单前端验证
           */
          $("#user-create").validate({
              rules: {
                  user_account: {required: true},
                  clase: {required: true},
              },
              messages: {
                  user_account: {required: "请填写账号"},
                  clase: {required: "请选择班级"},
              },


              /* 失去焦点时不验证 */
              onfocusout: false,
              onkeyup: false,
              errorElement: 'div',
              errorClass: 'help-block',

              success: function (e) {
                  $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                  $(e).remove();
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.tips(v.message, v.element, {tips: [3,'#dd0000'], time: 2000});
                      return false;
                  });

              },

              submitHandler: function (form) {
                  $.post('{{route('train.addUser')}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'clase': $("input:checkbox[name='clase']:checked").val(),
                      'uid': $("input[name='uid']").val(),
                      'source': 2,
                      'is_submit': true
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {time: 1000,shift: -1}, function () {
                          if (data.status === true) {
                              parent.location.reload();
                              parent.layer.close(parent.layer.index);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });
              }


          });

      });
  </script>
@stop